<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 实现一个时钟 -->
    <style>
        #box {
          width: 600px;
          height: 600px;
          border: 2px solid #363434;
          border-radius: 50%;
          margin: 50px auto;
          position: relative;
        }
        #boxSecond {
          width: 2px;
          height: 285px;
          background: rgb(17, 15, 15);
          position: absolute;
          top: 15px;
          left: 50%;
          transform-origin: center bottom;
          transform: rotate(0deg);
        }
        #boxMinute {
          width: 2px;
          height: 260px;
          background: rgb(28, 161, 165);
          position: absolute;
          top: 40px;
          left: 50%;
          transform-origin: center bottom;
          transform: rotate(0deg);
        }
        #boxHour {
          width: 2px;
          height: 240px;
          background: rgb(21, 105, 189);
          position: absolute;
          top: 60px;
          left: 50%;
          transform-origin: center bottom;
          transform: rotate(0deg);
        }
      </style>
     
    </head>
    <body>
      <div id="box">
        <div id="boxHour"></div>
        <div id="boxMinute"></div>
        <div id="boxSecond"></div>
        
      </div>
  
      <script>
        var secondEle = document.getElementById("boxSecond");
        var minuteEle = document.getElementById("boxMinute");
        var hourEle = document.getElementById("boxHour");
  
        fn();
        function fn() {
          var time = new Date();
          console.log(time);
          var m = time.getMilliseconds();
          var second = time.getSeconds()+m/1000;
          var minute = time.getMinutes()+second/60;
          var hour = time.getHours()+minute/60;
          var deg = 360 / (60 / second);
          var minutedeg = 360 / (60 / minute);
          var hourdeg =360/(12/hour)
            
          secondEle.style.transform = `rotate(${deg}deg)`;
          minuteEle.style.transform = `rotate(${minutedeg}deg)`;
          hourEle.style.transform = `rotate(${hourdeg}deg)`;
        }
  
        setInterval(function () {
          fn();
        }, 100);
      </script>
      
      </script>
    </body>
  </html>